<template>
  <view class="page">
    <uni-forms ref="form" :modelValue="formData" :rules="rules" label-width="80px">
      <uni-forms-item label="会员姓名:" name="name" required>
        <uni-easyinput type="text" v-model="formData.name" placeholder="请输入" />
      </uni-forms-item>
      <uni-forms-item label="手机号码:" name="mobile" required>
        <uni-easyinput type="number" v-model="formData.mobile" placeholder="请输入" />
      </uni-forms-item>
      <uni-forms-item label="性别:" name="gender">
        <uni-data-checkbox v-model="formData.gender" :localdata="genders" />
      </uni-forms-item>
      <uni-forms-item label="卡别:" name="cardId" required>
        <uni-data-select
          v-model="formData.cardId"
          :localdata="fmtCardList"
          :clear="false"
          @change="onCardChange"
        ></uni-data-select>
      </uni-forms-item>
      <uni-forms-item label="充值金额:">
        <uni-easyinput type="text" v-model="cardInfo.price" placeholder="" disabled />
      </uni-forms-item>
      <uni-forms-item label="次数:">
        <uni-easyinput type="text" v-model="cardInfo.count" placeholder="" disabled />
      </uni-forms-item>
      <uni-forms-item label="优惠信息:">
        <uni-easyinput type="textarea" v-model="cardInfo.info" placeholder="" disabled />
      </uni-forms-item>
    </uni-forms>
  </view>
</template>

<script>
  import { getCardList, saveMember, saveHistory, getCardList4Select } from '../../utils/storage.js'
  
  export default {
    onNavigationBarButtonTap(btn) {
      this.$refs.form.validate().then(async result => {
        //
        const mid = Date.now()
        this.mid = mid
        saveMember({...this.formData, id: mid, count: this.cardInfo.count })
        saveHistory({
          id: Date.now(),
          mid,
          type: 0, // 0: 充值，1：核销
          cardId: this.cardInfo.id,
          count: this.cardInfo.count,
          countLeft: this.cardInfo.count,
          price: this.cardInfo.price
        })
        const res = await uni.showModal({
          title: '系统提示',
          content: '恭喜，会员开卡成功！',
          cancelText: '查看会员卡',
          confirmText: '返回'
        })
        if (res.confirm) {
          uni.navigateBack()
        } else {
          uni.navigateTo({
            url: '/pages/member-detail/member-detail?id='+this.mid
          })
        }
        // 
      }).catch(err => {
        console.log('err: ' + err)
      })
    },
    data() {
      return {
        formData: {
          gender: 2
        },
        genders: [{ text: '女', value: 0 }, { text: '男', value: 1 }, { text: '保密', value: 2 }],
        cardList: getCardList(),
        cardInfo: {},
        fmtCardList: getCardList4Select(),
        mid: 0,
        rules: {
          name: {
            rules: [
              { required: true, errorMessage: '请输入会员姓名！' }
            ]
          },
          mobile: {
            rules: [
              { required: true, errorMessage: '请输入手机号码！' },
              { validateFunction: (rule,value,data,callback) => {
                const reg = /^1[3456789]\d{9}$/
                if (!reg.test(value)) {
                  callback('非法手机号！')
                }
                return true
              }}
            ]
          },
          cardId: {
            rules: [
              { required: true, errorMessage: '请选择卡别！' }
            ]
          }
        }
      }
    },
    methods: {
      onCardChange(e) {
        const currCard = this.cardList.find(item => item.id == e)
        const info = `充值${currCard.price}元，理发${currCard.count}次，折合${(currCard.price / currCard.count).toFixed(2)}元/次`
        this.cardInfo = { ...currCard, info }
      }
    },
    computed: {
    }
  }
</script>

<style scoped>
  /* page {
    padding: 30rpx;
  } */
  
  .uni-data-checklist {
    top: 5px;
  }
  
  :deep(.uni-input-input:disabled), :deep(.uni-textarea-textarea:disabled) {
    color: #333;
  }
</style>
